<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body class="min-h-screen bg-cover bg-center flex items-center justify-center"
    style="background-image: url('http://codegen.caihongy.cn/20201218/7886ddf02de9474a8045fdf7341479dc.jpg');">
    <div class="w-full flex justify-center items-center min-h-screen" id="app">
        <form
            class="layui-form bg-white bg-opacity-90 rounded-2xl shadow-2xl p-8 w-full max-w-md flex flex-col space-y-6"
            style="width: 100%; max-width: 420px;">
            <div class="text-3xl font-bold text-blue-600 text-center mb-2">用户注册</div>
            <div class="flex flex-col space-y-2">
                <label class="text-gray-700 text-sm mb-1">用户名</label>
                <input autocomplete="off"
                    class="border border-blue-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                    id="yonghuming" name="yonghuming" placeholder="请输入用户名" type="text">
            </div>
            <div class="flex flex-col space-y-2">
                <label class="text-gray-700 text-sm mb-1">密码</label>
                <input autocomplete="off"
                    class="border border-blue-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                    lay-verify="required" name="mima" placeholder="请输入密码" required type="password">
            </div>
            <div class="flex flex-col space-y-2">
                <label class="text-gray-700 text-sm mb-1">姓名</label>
                <input autocomplete="off"
                    class="border border-blue-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                    id="xingming" name="xingming" placeholder="请输入姓名" type="text">
            </div>
            <div class="flex flex-col space-y-2">
                <label class="text-gray-700 text-sm mb-1">联系电话</label>
                <input autocomplete="off"
                    class="border border-blue-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                    id="lianxidianhua" name="lianxidianhua" placeholder="请输入联系电话" type="text">
            </div>
            <button
                class="w-full py-2 bg-gradient-to-r from-blue-500 to-green-400 text-white font-semibold rounded shadow hover:from-green-400 hover:to-blue-500 transition-all mt-2"
                lay-filter="register" lay-submit>注册</button>
            <div class="text-center mt-2 text-sm">
                <a href="javascript:window.location.href='../login/login.html'"
                    class="text-blue-600 hover:underline">已有账号登录</a>
            </div>
        </form>
    </div>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/config.js"></script>
    <script src="../../modules/config.js"></script>
    <script src="../../js/utils.js"></script>
    <script src="../../js/validate.js"></script>
    <script>
        var vue = new Vue({ el: '#app', data: {}, methods: {} });
        layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function () {
            var layer = layui.layer;
            var element = layui.element;
            var carousel = layui.carousel;
            var form = layui.form;
            var http = layui.http;
            var jquery = layui.jquery;
            var tablename = http.getParam('tablename');
            form.on('submit(register)', function (data) {
                data = data.field;
                if (!data.yonghuming) {
                    layer.msg('用户名不能为空', { time: 2000, icon: 5 }); return false
                }
                if (!data.mima) {
                    layer.msg('密码不能为空', { time: 2000, icon: 5 }); return false
                }
                if (!isMobile(data.lianxidianhua)) {
                    layer.msg('联系电话应输入手机格式', { time: 2000, icon: 5 }); return false
                }
                http.requestJson(tablename + '/register', 'post', data, function (res) {
                    layer.msg('注册成功', { time: 2000, icon: 6 }, function () {
                        window.location.href = '../login/login.html';
                    });
                });
                return false
            });
        });
    </script>
</body>

</html>